<template>
  <el-dialog :title="title+'客户'" :visible="isShow" @close="closeDialog">
    <el-form :model="kundeForm" :rules="rules">
      <el-form-item label="客户" label-width="50px">
        <el-dropdown>
          <el-button size="">
            灰太狼房产<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item label="姓名" prop="name" label-width="50px">
        <el-input v-model="kundeForm.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email" label-width="50px">
        <el-input v-model="kundeForm.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="电话" prop="phone" label-width="50px">
        <el-input v-model="kundeForm.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item label="微信" prop="wechat" label-width="50px">
        <el-input v-model="kundeForm.wechat" placeholder="请输入微信" />
      </el-form-item>
      <el-form-item label="描述" prop="desc" label-width="50px">
        <el-input
          v-model="kundeForm.desc"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 3}"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="封面" label-width="50px">
        <!-- 上传图片组件 -->
        <updateImage ref="agentsUpdat" />
      </el-form-item>
      <el-row type="flex" justify="end">
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        <el-button size="small" @click="closeDialog">取消</el-button>
      </el-row>
    </el-form>

  </el-dialog>
</template>

<script>
import { addKundeFn, undateKundeFn, editsKundeFn } from '@/api/myclient'
import updateImage from '@/components/updateImage'
export default {
  components: {
    updateImage
  },
  props: {
    isShow: { type: Boolean
    }, kundeList: {
      type: Function
    }, kundeCount: {
      type: Function
    }},
  data() {
    return {
      title: '新增',
      kundeForm: {
        name: '', // 客户名称
        email: '', // 电子邮箱，比如 example@qq.com
        phone: '', // 电话
        wechat: '', // 微信
        desc: '', // 描述
        image: '' // 封面图
      },
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 2, max: 100, message: '名称2到100字', trigger: 'blur' }],
        desc: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        wechat: [{ required: true, message: '微信不能为空', trigger: 'blur' },
          { min: 2, max: 100, message: '微信名2到100字符内', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 编辑回显
    async editsKundeFn(id) {
      // try {
      console.log(id)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const res = await editsKundeFn(id)
      this.$refs.agentsUpdat.fileList.push({ url: res.image })
      this.kundeForm = res
      loading.close()
      // } catch {
      //   this.$message.error('编辑获取数据失败!')
      // }
    },
    closeDialog() {
      this.$emit('update:isShow', false)
      this.kundeForm = {
        name: '', // 客户名称
        email: '', // 电子邮箱，比如 example@qq.com
        phone: '', // 电话
        wechat: '', // 微信
        desc: '', // 描述
        image: '' // 封面图
      }
    },
    // 点击确定添加或编辑
    async btnOk() {
      // try {
      // console.log(11, this.kundeForm.id)
      this.kundeForm.image = this.$refs.agentsUpdat.fileList[0] && this.$refs.agentsUpdat.fileList[0].url || ''
      this.kundeForm.id ? await undateKundeFn(this.kundeForm) : await addKundeFn(this.kundeForm)
      this.$message.success(this.title + '客户成功')
      this.$emit('update')
      this.closeDialog()
      // } catch {
      //   this.$message.error('处理失败！')
      // }
    }

  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-textarea__inner{
  resize: none;
}
</style>
